<template>
	<div>
		<!-- 调用 -->
		<div class="city">
			<city-header></city-header>
			<city-List :city="city" :hotCities='hotCities'></city-List>
		</div>
	</div>
</template>

<script>
	/* 引入 */
	import CityHeader from './pages/Header'
	import CityList from './pages/List'
	import axios from 'axios'
	
	/* 导出 */
	export default{
		components:{
			CityHeader,
			CityList
		},
		data(){
			return{
				hotCities:[],
				 city:[]
			}
		},
		mounted() {
			axios.get('./city.json').then((res)=>{
				// console.log(res);
				
				const msg=res.data.data[0];  //声明变量获取请求结果里面的数据
				this.hotCities=msg.hotCities;
				console.log(this.hotCities)
				this.city=msg.city;
			})
		}
	}
</script>

<style scoped >
	.city{
		background-color: #f5f5f5;
	}
</style>
